<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
</head>

<body>
    <div id="app">
        <one></one>
        <two></two>
    </div>
    <script>
        Vue.directive("mycolor", {
            inserted(el, binding) {
                console.log(el);
                console.log(binding);
                el.style.color = binding.value;
            }
        })


        Vue.component("one", {
            template: `
                <div>
                    <p>{{time|fmtTime(time)}}</p>
                    <input typ="text" v-mycolor="color">
                </div>
            `,
            data() {
                return {
                    time: new Date(),
                    color: "red"
                }
            },
            filters: {
                fmtTime(time) {
                    var y = time.getFullYear();
                    var m = time.getMonth();
                    var d = time.getDate();
                    return y + "/" + m + "/" + d;
                }
            }
        });

        Vue.component("two", {
            template: `         
                <div>
                    <p>{{time}}</p>
                    <input typ="text" v-myfocus v-mycolor="color">
                </div>
                `,
            data() {
                return {
                    time: new Date(),
                    color: "blue"
                }
            },
            directives: {
                myfocus: {
                    inserted(el, binding) {
                        console.log(el, 3333);
                        console.log(binding, 444);

                    }
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>